<template>
  <div>
    <el-card class="main-card"
             shadow="never"
             v-loading="$store.state.loading">
      <el-form ref="form"
               :model="form"
               label-width="130px"
               :rules="rules"
               :disabled="type === 3">
        <el-form-item label="农村名称："
                      prop="fkRuralId">
          <el-select v-model="form.fkRuralId"
                     placeholder="请选择农村名称"
                     filterable
                     clearable
                     style="width: 100%">
            <el-option v-for="item in deptList"
                       :key="item.id"
                       :label="item.deptName"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经营性收入："
                      prop="operatingIncome">
          <el-input v-model.number="form.operatingIncome"
                    placeholder="请输入经营性收入(万元)"
                    type='number'></el-input>
        </el-form-item>
        <el-form-item label="经常性收入："
                      prop="recurringIncome">
          <el-input v-model.number="form.recurringIncome"
                    placeholder="请输入经常性收入(万元)"
                    type='number'></el-input>
        </el-form-item>
        <el-form-item label="年份："
                      prop="statisticsYear">
          <el-date-picker v-model="form.statisticsYear"
                          type="year"
                          style="width: 100%"
                          value-format='yyyy'
                          placeholder="选择年份">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import store from "../../../store"
export default {
  props: {
    type: {
      type: Number,
      default: 1
    },
    madelId: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    const checkOperatingIncome = (rule, value, callback) => {
      console.log(Number)
      if (value === null || !(typeof value === 'number')) {
        callback(new Error('请输入经营性收入'))
      } else {
        callback()
      }
    }
    const checkRecurringIncome = (rule, value, callback) => {
      // console.log(typeof value)
      if (value === null || !(typeof value === 'number')) {
        callback(new Error('请输入经常性收入'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        fkRuralId: [{ required: true, message: '请输入农村名称', trigger: 'change' }],
        operatingIncome: [{ required: true, validator: checkOperatingIncome, trigger: 'blur' }],
        recurringIncome: [{ required: true, validator: checkRecurringIncome, trigger: 'blur' }],
        statisticsYear: [{ required: true, message: '请选择年份', trigger: 'change' }],
      },
      form: {
        fkRuralId: "",
        id: "",
        operatingIncome: null,
        recurringIncome: null,
        statisticsYear: null,
        version: 0
      },
      deptList: [],
      action: {
        def: '/ruralCollectiveEconomy/',
        getDept: '/accountDept/listSelectDeptNames'
      },
    }
  },
  created () {
    this.getDeptInfo()
    if (this.type === 1) {
      this.form.fkRuralId = (store.state.userInfo.deptList[0].id && store.state.userInfo.deptList[0].id !== '') ? store.state.userInfo.deptList[0].id : ''
    }
    if (this.type !== 1) {
      this.getPageList()
    }
  },
  methods: {
    getDeptInfo () {
      this.$Ajax(
        this.action.getDept,
        'get',
        {},
        (res) => {
          this.deptList = res.data
        }
      )
    },
    col () {
      this.$emit('colMalde')
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        this.$Ajax(
          this.action.def,
          this.type === 1 ? 'post' : 'put',
          this.form,
          (res) => {
            this.$message.success(res.message);
            this.$emit('getdata')
            this.col()
          }
        )
      })
    },
    getPageList () {
      this.$Ajax(
        this.action.def + this.madelId,
        "get",
        {
        },
        (res) => {
          console.log(res.data)
          Object.keys(this.form).forEach(key => {
            if (res.data[key] !== undefined) {
              this.form[key] = res.data[key]
              if (key === 'statisticsYear') {
                this.form[key] = res.data[key].toString()
              }
            }
          })
        }
      );
    },
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-input__inner {
  padding-right: 0px;
}
.footer-btn {
  text-align: right;
}
.divider {
  margin-bottom: 10px;
}
</style>